<template>
  <div class="my-curriculum">
    <van-tabs  title-active-color="#ff6422" @click="curriculumTab">
      <van-tab title="在学课程" style="font-size:.32rem">
      </van-tab>
      <van-tab title="已结课程" style="font-size:.32rem">
      </van-tab>
    </van-tabs>
     <div class="curriculum">
          <ul class="clearfix">
            <li v-for="(item,index) in list" :key="item.id">
              <img src="../../assets/images/pic2.png" alt class="cover">
              <h2>自然拼读</h2>
              <p class="time">
                <img src="../../assets/images/time1.png"> 2020年1月1日 23:59截止
              </p>
              <div class="bottom">
                <p>45678人已学</p>
                <button @click="toDetail(index)">去上课</button>
              </div>
            </li>
          </ul>
        </div>
     <div class="none">已经到底喽～</div>
  </div>
</template>
<script>
import { Tab, Tabs,Toast } from "vant";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast
  },
  data() {
    return {
      list:[{},{},{},{},{}]
    }


  },
  methods:{
    curriculumTab () {
       Toast.loading({
        duration: 1000, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: "spinner",
        message: "加载中..."
      });
    },
    toDetail () {
      this.$router.push({path:'/phonics'})
    }
  }
};
</script>

<style>
body {
  background: #f1f1f1;
}
.van-ellipsis {
  font-size: 0.32rem;
  height: 1rem;
  line-height: 1rem;
  
}
.van-tab {
color:#999;
}
.van-tabs--line .van-tabs__wrap {
  height: 1rem;
  line-height: 1rem;
}
.van-tabs--line {
  padding-top: 1.2rem;
}
</style>

<style lang="scss" scoped>
.curriculum {
  padding: 0.3rem;
  ul {
    li {
        margin-bottom: .20rem;
      &:nth-child(1n) {
        float: left;
      }
      &:nth-child(2n) {
        float: right;
      }
      width: 3.35rem;
      background: #fff;
      padding-bottom: 0.3rem;
      img.cover {
        width: 100%;
        height: 1.68rem;
      }
      h2 {
        font-size: 0.28rem;
        color: #333;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        padding-top: 0.26rem;
        padding-bottom: 0.1rem;
      }
      p.time {
        padding: 0 0.2rem;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        img {
          width: 0.18rem;
          height: 0.18rem;
          position: relative;
          top: -0.03rem;
        }
        vertical-align: middle;
      }
      .bottom {
          margin-top: .20rem;
        button {
          width: 1.3rem;
          height: .50rem;
          line-height: .40rem;
          border:0;
          background: #f85415;
          font-size: .24rem;
          color:#fff;
          border-radius: .30rem;
          vertical-align: middle;
          &:active {
              background: #dd460c;
          }
          
        }
        .past {
              background: #cccccc;
          }
        
        p {
          color: #999999;
          font-size: 0.18rem;
          float: left;
          width: 1.9rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-indent: .20rem;
          margin-top: .10rem;
        }
      }
    }
  }
}
.none {
  font-size: .26rem;
  color:#cccccc;
  margin-top: .70rem;
  margin-bottom: 1.6rem;
  text-align: center;
}
</style>
